<template>
  <div class="tightening-app" @mousemove="onMousemove">
    <t-header ref="headerRef" @menuclick="onMenuClick"></t-header>
    <div class="camera-list" v-if="showId===2">
      <mirror></mirror>
    </div>
    <production :show="showId===20"></production>
    <user :show="showId===10" @close="closeDialog"></user>
    <logger :show="showId===30" @close="closeDialog"></logger>
  </div>
</template>

<script>

module.exports = {
  name: 'index',
  components: {
    preview: httpVueLoader('./components/Preview.vue'),
    mirror: httpVueLoader('./components/Mirror.vue'),
    user: httpVueLoader('./user/Index.vue'),
    Logger: httpVueLoader('./logger/Index.vue'),
    Production: httpVueLoader('./production/Index.vue'),
    THeader: httpVueLoader('./components/Header.vue'),
  },
  data () {
    return {
      sdf: [{ fileUrl: window.imagssss }],
      packNumber: null,
      showRepairBoxViewDialog: false,
      showErrorDialog: false,
      canvasWidth: 1000, // 画布宽度
      canvasHeight: 400, // 画布高度
      imageSrc: window.imagssss, // 图片URL
      dots: [ // 可配置的四个圆点
        { x: 50, y: 50, radius: 10, color: 'red' },
        { x: 350, y: 50, radius: 10, color: 'blue' },
        { x: 350, y: 250, radius: 10, color: 'green' },
        { x: 50, y: 250, radius: 10, color: 'purple' },
      ],

      topDots: [], // 顶部边的圆点
      rightDots: [], // 右边边的圆点
      bottomDots: [], // 底部边的圆点
      leftDots: [], // 左边边的圆点

      baseWidth: 50,
      showId: 2,
      pageIndex: 1,
      radius: 10,
    }
  },
  methods: {
    onMenuClick (type) {
      this.showId = type;
    },
    /**
     * 监听是否需要人工补拧
     * @param PackNumber
     */
    onArtificialOperation (PackNumber) {
      if (this.showRepairBoxViewDialog) {
        return;
      }
      this.packNumber = PackNumber;
      this.showRepairBoxViewDialog = true;
    },
    /**
     * 检查是否有下一个箱子需要补拧
     * @constructor
     */
    GetNextPack () {
      GetUnfinishedJopPackApi().then((r) => {
        if (r.Status) {
          this.onArtificialOperation(r.Data.PackNumber);
        }
      });
    },
    /**
     * 关闭补拧窗口
     *
     * 检查下一个箱子是否完成工作，需要补拧
     */
    onClickRepairBoxViewDialog () {
      this.showRepairBoxViewDialog = false;
      this.packNumber = null;

      this.GetNextPack();
    },
    onMousemove () {
      this.$refs['headerRef'].resetDeadline2();
    },
    /**
     * 初始化页面
     */
    init () {
      setTimeout(() => {
        this.OnDeriveWorking();
      }, 3000);

      console.log(this.$Axios);
    },
    OnDeriveWorking () {
      OnDeriveWorkingApi().then(r => {
        console.log(r);
        if (r.Status) {
          let PackNumber = r.Data.PackNumber;
          this.$confirm('检测到有正在工作的箱体, 是否继续上次的工作?', 'SFC:' + PackNumber, {
            confirmButtonText: '继续工作',
            cancelButtonText: '取消工作',
            type: 'warning'
          }).then(() => {
            StepWorkingApi(PackNumber);
            this.$EventBus.$emit('starting', 2);
          }).catch(() => {
            isUploadMesApi(PackNumber, 3).then(r => {
              this.$message({ type: 'warning', message: '已取消' });
            })
          });
        }
      });
    },
    /**
     * 关闭错误窗口
     */
    onCloseErrorDialog () {
      this.showErrorDialog = false;
    },
    /**
     *  全局的日志通知
     *  type: success/warning/info/error
     */
    notification (notice) {
      let type = 'info';
      if (notice.Type === 0) {
        type = 'success';
      }
      if (notice.Type === 2) {
        type = 'warning';
      }
      if (notice.Type === 3) {
        type = 'error';
      }
      this.$notify({
        title: notice.Title,
        message: notice.Message,
        type: type,
        duration: notice.Duration,
        offset: 100
      });
    },
    closeDialog () {
      this.showId = 0;
    },
    /**
     * 显示数据管理窗口
     * @param index
     * @param menu
     * @constructor
     */
    showMenuItem (menu) {
      this.showId = menu.id;
    }
  },
  mounted () {
    this.$EventBus.$on('showRepairBoxViewEvent', (PackNumber) => {
      this.packNumber = PackNumber;
      this.showRepairBoxViewDialog = true;
    });
    this.$EventBus.$on('login', () => {
      this.$forceUpdate();
    });
    this.$EventBus.$on('change_page', (v) => {
      this.pageIndex = v;
    });

    window.appNotification = this.notification;
    window.onWorking = (v) => {
      setTimeout(() => {
        this.$EventBus.$emit('onWorking', v);
      }, 1000);
    };
    window.ArtificialOperation = (PackNumber) => {
      this.onArtificialOperation(PackNumber);
    }
    this.init();
  }
}
</script>

<style scoped>
.tightening-app {

  height: 100%;
  display: flex;
  flex-direction: column;

  .camera-list {
    display: flex;
    flex-wrap: wrap;
  }

  canvas {
    border: 1px solid #ccc;
  }
}
</style>
